<template>
	<view class="demo">
		<!-- 	<view class="orders">
			<h3 @click="backs" style="margin-left: 10vw;margin-top: 6vw;font-size: 5vw;"><span class="icon-return"
					style="font-size: 4vw;margin-right: 3vw;"></span>历史记录</h3>
		</view> -->
		<view class="empty" v-if="lists.length<1">
			暂无数据
		</view>
		<view v-else class=""
			style="width: 90vw;height: 25vw;background-color: #ffffff;display: flex;border-radius: 3vw;margin-top: 5vw;"
			v-for="(item,index) in lists" :key="index" @click="go_xq(index)">

			<view class="hist_zuo">
				<image style="width: 100%;height: 100%;" :src="item.image" mode=""></image>
			</view>
			<view class="hist_center">
				<h3
					style="width: 25vw;font-size: 3vw;margin-top: 3vw;margin-left: 3vw;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
					{{item.name}}
				</h3>
				<p style="font-size: 3vw;color: #ccc;margin-top: 2vw;margin-left: 3vw;">{{item.marketHashName}}</p>
			</view>
			<view class="hist_you">
				<h3 style="line-height: 10vw;">￥{{item.price}}</h3>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists: []
			}
		},
		onShow() {
			this.shows()
		},
		methods: {
			backs() {
				uni.navigateBack()
			},
			go_xq(index) {
				// console.log(index)
				console.log(this.lists[index])
				let detailMsg = JSON.stringify(this.lists[index])
				uni.navigateTo({
					url: `/pages/pay/pay?detailMsg=${detailMsg}`
				})
			},
			shows() {
				uni.request({
					url: "/api/jewerly/viewHistory",
					method: "POST",
					header: {
						'content-Type': 'application/json',
						token: uni.getStorageSync('token')
					},

				}).then(res => {
					console.log(res.data.data)
					this.lists = res.data.data
				})
			}
		}
	}
</script>
<style type="text/css">
	@import url("../../static/icon2/style.css");
</style>
<style>
	.demo {
		width: 100vw;
		height: 93vh;
		background-color: #f4f5f7;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* overflow: scroll; */
	}

	.empty {
		width: 100%;
		text-align: center;
		padding-top: 20rpx;
	}

	.orders {
		width: 100%;
		height: 20vw;
	}

	.hist_item {
		width: 90%;
		height: 50vw;
		background-color: #ffffff;
		border-radius: 5vw;
		display: flex;
		margin-top: 5vw;
	}

	.hist_zuo {
		width: 30vw;
		height: 100%;
		border-radius: 5vw;

	}

	.hist_center {
		width: 30vw;
		height: 100%;
	}

	.hist_you {
		flex: 1;

	}
</style>